<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>移动元素</title>
	<style>
		div {
			width: 13.3333vw;
			height: 13.3333vw;
			background: pink;
		}
	</style>
</head>

<body>
	<div>

	</div>
	<script>
		window.addEventListener('load', function () {
			var dix = document.querySelector('div');
			var tartX = 0;		//获取手指的坐标
			var tartY = 0;
			var x = 0;			//div的初始坐标
			var y = 0;
			dix.addEventListener('touchstart', function (e) {
				tartX = e.targetTouches[0].pageX;
				tartY = e.targetTouches[0].pageY;
				x = this.offsetLeft;
				y = this.offsetTop;
				console.log(tartX, tartY)
			})
			dix.addEventListener('touchmove', function (e) {
				var moveX = e.targetTouches[0].pageX - tartX;		//获取div移动的水平距离
				var moveY = e.targetTouches[0].pageY - tartY;
				this.style.marginLeft = x + moveX + 'px';
				this.style.marginTop = y + moveY + 'px';
				e.preventDefault();									//阻止屏幕默认移动滚动事件
			})
		})

	</script>
</body>

</html>